<template>
  <el-dialog title="就诊信息" :close-on-click-modal="false" :visible.sync="visible" fullscreen center append-to-body>
    <div class="mod-config" style="padding: 0 15px;">
      <div class="custom-info-box">
        <!-- 客户基础信息 -->
        <div class="custom-box">
          <div class="custom-item"><span>姓名：</span><span>{{registerForm.personName}}</span></div>
          <div class="custom-item">
            <span>性别：</span>
            <span v-if="dataForm.gender == 0">男</span>
            <span v-if="dataForm.gender == 1">女</span>
          </div>
          <div class="custom-item"><span>年龄：</span><span>{{registerForm.age}}岁</span></div>
          <div class="custom-item"><span>联系方式：</span><span>{{registerForm.telphone}}</span></div>
          <div class="custom-item"><span>就诊事项：</span><span>{{registerForm.registerConfigName}}</span></div>
          <div class="custom-item"><span>费别：</span><span>{{registerForm.payType==1?'自费':'医保'}}</span></div>
          <div class="custom-item"><span>患者ID：</span><span>{{registerForm.uniqueCode}}</span></div>
          <div style="position: absolute;right: 0;top: 3px;">
            <el-button size="mini" type="primary" icon="el-icon-caret-bottom" @click="openOrClose"></el-button>
          </div>
        </div>

        <!-- 客户详细信息 -->
        <div class="custom-box" v-if="infoVisible">
          <div class="custom-item"><span>{{registerForm.address}}</span></div>
        </div>
      </div>
      <el-tabs class="tabs-info-box" :class="isCollapse?'width1':'width2'" type="border-card" v-model="activeName"
        @tab-click="tabsChange">
        <el-tab-pane label="基础检查" v-for="item in data" :label="item.name" :name="'item' + item.id" :key="item.id">
          <el-scrollbar class="center-scrollbar">
            <el-row class="center-board-row">
              <el-form
                :size="formConf.size"
                :label-position="formConf.labelPosition"
                :disabled="formConf.disabled"
                :label-width="formConf.labelWidth + 'px'">
                  <draggable class="drawing-board" :list="drawingList" :animation="340" group="componentsGroup">
                    <draggable-item v-for="(element, index) in drawingList" :key="element.renderKey" :drawing-list="drawingList"
                      :element="element" @activeItem="activeFormItem" :index="index" :form-conf="formConf"/>
                  </draggable>
              </el-form>
            </el-row>
          </el-scrollbar>

        </el-tab-pane>
      </el-tabs>

      <div class="button-info-box">
        <el-button type="primary" @click="submitForm">提 交</el-button>
        <el-button @click="visible = false">取 消</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  import {  mapGetters } from 'vuex'
  import { remote } from '@/api/admin/dict'

  import { getRegister } from '@/api/eims/cashier/register'

  import draggable from 'vuedraggable'
  import DraggableItem from '@/views/def/checkField/DraggableItem'
  import render from '@/util/generator/render'
  import { formConf } from '@/util/generator/config'

  import { getChkDataInfo, saveChkDataInfo } from '@/api/chkdata/chkdata'


  export default {
    props:["data","id","registerForm"],
    data() {
      return {
        visible: false,
        infoVisible: false,
        activeName: 'item2',
        //右边对应的属性
        formConf,
        labelWidth: 100,
        drawingList: [],
        formData: {
          id: this.id,
          checkItems: []
        },
        itemIdArr: []
      }
    },
    components: {
      draggable,
      render,
      DraggableItem
    },
    computed: {
      ...mapGetters(['permissions', 'isCollapse'])
    },
    methods: {
      // 打开弹窗，初始化数据
      init() {
        this.visible = true
        console.log(this.data)
        // console.log(this.data)
        let resultData = JSON.parse(this.data[0].jsonContent)
        resultData.forEach((item,index) => {
          resultData[index].id += ''
        })
        this.drawingList = resultData
        this.activeName = 'item' + this.data[0].id
        //  获取检查项数据
       this.getChkDataDetail(0)
      },
      getChkDataDetail(idx) {
        getChkDataInfo(this.id).then(result => {
          let dataForm = {}
          this.formData.id = this.id
          this.formData.checkItems = result.data.data.chkData.checkItems || []
          if(result.data.data.chkData.checkItems[idx]){
            dataForm = result.data.data.chkData.checkItems[idx].dataMap
            this.$nextTick(() => {
              this.drawingList.forEach(item => {
                for(let key in dataForm){
                  if(item.fieldProp == key) {
                    item.defaultValue = dataForm[key]
                  }
                }
              })
            })
          }
        })
      },
      // 打开或关闭客户详情信息
      openOrClose() {
        this.infoVisible = !this.infoVisible
      },
      tabsChange(tab, event) {
        let idx = Number(tab.index)
        this.getChkDataDetail(idx)
        let resultData = JSON.parse(this.data[idx].jsonContent)
        resultData.forEach((item,index) => {
          resultData[index].id += ''
        })
        this.drawingList = resultData
      },
      AssembleFormData() {
        this.formData = {
          fields: JSON.parse(JSON.stringify(this.drawingList)),
          ...this.formConf
        }
      },
      activeFormItem(element) {
        this.activeData = element
        this.activeId = element.formId
      },
      submitForm() {
        let formData = {}
        this.formData.id = this.id
        let obj = {}
        let itemId = this.activeName.substring(4)*1
        obj.itemId = itemId
        let dataMap = {}
        this.drawingList.forEach(item => {
          let key = item.fieldProp
          let value = item.defaultValue
          dataMap[key] = value
        })
        obj.dataMap=JSON.parse(JSON.stringify(dataMap))

        let itemIdArr = []
        this.formData.checkItems.forEach(item => {
          if(itemIdArr.indexOf(item.itemId) == -1){
            itemIdArr.push(item.itemId)
          }
        })
        if(itemIdArr.indexOf(obj.itemId) != -1) {
          this.formData.checkItems.forEach((item,index) => {
            if(item.itemId == obj.itemId){
              this.formData.checkItems.splice(index,1,obj)
            }
          })
        }else{
          this.formData.checkItems.push(obj)
        }
        saveChkDataInfo(this.formData).then(result => {
          this.$message.success('提交成功')
          this.visible = false
        })
      },
      //  离开当前tabs
      // leaveTabs(activeName, oldActiveName){
      //   let obj = {}
      //   let dataMap = {}
      //   obj.itemId = oldActiveName.substring(4)*1
      //   this.drawingList.forEach(item => {
      //     dataMap[item.fieldProp] = item.defaultValue
      //   })
      //   obj.dataMap=JSON.parse(JSON.stringify(dataMap))
      //   let itemIdArr = []
      //   console.log(this.formData.checkItems)
      //   this.formData.checkItems.forEach(item => {
      //     if(itemIdArr.indexOf(item.itemId) == -1){
      //       itemIdArr.push(item.itemId)
      //     }
      //   })
      //   if(itemIdArr.indexOf(obj.itemId) != -1){
      //     this.formData.checkItems.forEach((item,index) => {
      //       if(item.itemId == obj.itemId){
      //         this.formData.checkItems.splice(index,1,obj)
      //       }
      //     })
      //   }else{
      //     this.formData.checkItems.push(obj)
      //   }
      // },
      //  拼装当前TAB页的数据
      // tabDataJoin(tabId) {
      //   let obj = {}
      //   let dataMap = {}
      //   obj.itemId = tabId
      //   this.drawingList.forEach(item => {
      //     dataMap[item.fieldProp] = item.defaultValue
      //   })
      //   obj.dataMap = JSON.parse(JSON.stringify(dataMap))
      // }
    }
  }
</script>

<style lang="scss" scoped>
.custom-info-box {
    border: solid 1px #e7e7e7;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    border-radius: 4px;
    background-color: #F5F7FA;
    margin-bottom: 15px;
  }

  .tabs-info-box {
    z-index: 1000;
  }

  .button-info-box {
    margin-top: 15px;
    text-align: right;
  }

  .custom-box {
    position: relative;
    display: flex;
    justify-content: flex-start;
    padding: 5px 15px;

    .custom-item {
      flex: auto;
    }
  }
</style>
